<template>
  <div class="Memberpromotion_container">
    <!-- 搜索条件 -->
    <div class="nav">
      <Row>
        <Col span="24">
          <h2 class="addcustomergroup_title">会员升级</h2>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <div class="Memberpromotion">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
              <Row>
                <!-- <Col span="8">
                  <FormItem label="选择颗粒度：">
                    <Row>
                      <Col span="5">
                        <RadioGroup type="button" v-model="formValidate.time_type" class="buttongroup">
                          <Radio label="3">月</Radio>
                          <Radio label="4">年</Radio>
                        </RadioGroup>
                      </Col>
                    </Row>
                  </FormItem>
                </Col> -->
                <Col span="8">
                    <FormItem label="选择会员渠道：" prop="channel_id"   :label-width="100">
                       <Select v-model="formValidate.channel_id" placeholder="请选择.."
                          style="width:11vw;margin-left:-10px;">
                          <Option value="0">全部</Option>
                          <Option v-for="item in channels"
                            :value="item.id" :key="item.value" >{{ item.name }}</Option>
                        </Select>
                    </FormItem>
              </Col>
                <Col span="8">
                  <FormItem label="选择时间：">
                    <Row>
                      <Col span="5">
                        <FormItem prop="start_time" :label-width="120">
                          <DatePicker
                            type="datetime"
                            placeholder="请选择日期"
                            :value="formValidate.start_time"
                            format="yyyy-MM-dd"
                            @on-change="formValidate.start_time=$event"
                            style="width:150px;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                      <Col span="7" style="text-align: center" push="5">~</Col>
                      <Col span="6" push="5">
                        <FormItem prop="end_time" :label-width="120">
                          <DatePicker
                            type="datetime"
                            placeholder="请选择日期"
                            format="yyyy-MM-dd"
                            :value="formValidate.end_time"
                            @on-change="formValidate.end_time=$event"
                            style="width:150px;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
              </Row>
              <Row style="margin-top:2vh;">
                <FormItem style="margin-top:1vh;margin-left:-5vw;">
                  <Row>
                    <Col span="8">
                      <Button
                        type="success"
                        style="width:10vw;"
                        @click="getReportMemberLevelChangeList"
                      >查询</Button>
                    </Col>
                    <Col span="3" push="10">
                      <Button
                        type="success"
                        style="width:10vw;margin-left:1vw;"
                        @click="exportExcel"
                      >下载</Button>
                    </Col>
                  </Row>
                </FormItem>
              </Row>
            </Form>
          </div>
        </Col>
      </Row>
    </div>
    <Row>
      <Col span="24">
        <!-- 表格 -->
        <div class="table_container" v-if="showTable">
          <div class="table_search_result" style="margin-bottom:80vh;">
              <table class="table">
                <tr class="thead" >
                  <th colspan="2" rowspan="2" style="width:25%">会员人数</th>
                  <th :colspan="this.levelnamelist.length" style="width:70%">{{endTime}}</th>
                </tr>
                <tr class="levelname">
                  <td v-for="(item,index) in levelnamelist" :key="index">{{item.level_name}}</td>
                </tr>
                <tr>
                  <th :rowspan="this.levellist.length+1">{{startTime}}</th>
                </tr>
                <tr class="alt" v-for="(item,index) in levellist" :key="index">
                  <td style="width:10%">{{item.level_name}}</td>
                  <td v-for="(item,index) in levelnamelist" :key="index">{{item.to_level_1_count | formatnum}}</td>
                </tr>
              </table>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import {
  getReportMemberLevelChange,
  exportMemberLevelChange,
  fetchChannelList
} from "@/api/report";
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: "Memberpromotion",
  data() {
    return {
      showTable: false,

      pageNum: 1,
      pageSize: 10,
      total: 0,
      reportList: [],
      startTime: "",
      startTimeyear:'',
      startTimemonth:'',

      endTime: "",
      endTimeyear:'',
      endTimemonth:'',

      formList: [],
      levellist:[],

      channels: [],
      formValidate: {
        // 查询参数
        start_time: "",
        end_time: "",
        channel_id: "0",
        store: "",
        time_type: "3"
      },
      ruleValidate: {
        // 查询验证
        selectdate: [
          {
            required: true,
            type: "date",
            message: "请选择时间",
            trigger: "change"
          }
        ],
        selecttime: [
          {
            required: true,
            type: "date",
            message: "请选择时间",
            trigger: "change"
          }
        ]
      },
    };
  },
  created() {
    this.channelList();
  },
  methods: {
    getNowFormatDate() {
      var date = moment().format("YYYY-MM-DD"); //当前时间
      var CurDate = moment().subtract(2, "days").format("YYYY-MM-DD"); //当前时间的前2天时间
      var startDate = moment().subtract(5, "days").format("YYYY-MM-DD"); //当前时间的前5天时间
      this.formValidate.start_time = startDate;
      this.formValidate.end_time = CurDate;
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("查询成功!");
        } else {
          this.$Message.error("查询失败,请补充查询条件");
        }
      });
    },
    //渠道
    channelList() {
      fetchChannelList().then(res => {
        if (res.data.code == 200) {
          if (res.data.data) {
            this.channels = res.data.data;
          }
        } else {
          this.$Message.error("操作失败");
        }
      });
    },


    exportExcel() {
      // 设置当前日期
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let name = year + "" + month + "" + day;
      /* generate workbook object from table */
      //  .table要导出的是哪一个表格
      var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    // 查询
    getReportMemberLevelChangeList() {
      this.showTable = false;
      if (this.formValidate.time_type == ''){
        this.$Message.error("请选择颗粒度");
        return;
      }
      if (this.formValidate.start_time == "") {
        this.$Message.error("请选择时间段");
        return;
      }
      if (this.formValidate.end_time == "") {
        this.$Message.error("请选择时间段");
        return;
      }
      if (this.formValidate.start_time > this.formValidate.end_time) {
        this.$Message.error("开始时间必须小于结束时间");
        return;
      }

      var reqParams = {
        time_type: this.formValidate.time_type,
        start_time: this.formValidate.start_time,
        end_time: this.formValidate.end_time,
      };

      getReportMemberLevelChange(reqParams).then(res => {
        if (res.data.code == 200) {
          var data = res;
          this.startTime = res.data.result.message_2 + '初始状态';
          // this.startTime = this.startTimeyear + '年' + this.startTimemonth + '月';
          this.endTime = res.data.result.message_3  + '截止状态';
          // this.endTime = this.endTimeyear + '年' + this.endTimemonth + '月' + '截止状态';

          this.formList = res.data.result.formList;
          this.levelnamelist = res.data.result.formList.splice(1,res.data.result.formList.length);
          this.levellist = this.formList.concat(this.levelnamelist)
          this.showTable = true;
        } else if (res.data.code == 401) {
            this.$Message.error(res.data.msg);
        } else {
            this.$Message.error("操作失败");
        }
      });
    },

  },
  computed: {
    tablestyle(){
      return {
        backgroundColor:'#333',
        width:'100%',
      }
    }
  },
  mounted() {
    this.getNowFormatDate();
    var time = setInterval(() => {
      this.getNowFormatDate();
    }, 86400000);
    this.getReportMemberLevelChangeList();
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.Memberpromotion_container {
  @include container_global;
  background-color: #fff;
  .active {
    color: #68b6ff;
    border: 1px solid #8fc3ff;
    background-color: #e6f2ff;
  }
  .nav {
    height: 25vh;
    width: 100%;
    line-height: 35px;
    background-color: #fff;
    .addcustomergroup_title {
      height: 7vh;
      font-weight: bolder;
    }
    .buttongroup {
      display: flex;
      justify-content: flex-start;
    }
  }
  .table_container {
    border: 1px solid #e8edf1;
    .table_search_result {
      width: 100%;
      min-height: 300px;
      border: 1px solid #e8edf1;
      .table{
          margin-top: 5vh;
          font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
          width:100%;
          border-collapse:collapse;
          .thead{
            width: 20%;
            background-color: #f8f8f9;
          }
          .levelname{
             background-color: #f8f8f9;
             text-align: center;
          }
        }
        .table td, .table th{
          font-size:1em;
          border:1px solid #cacad1;
        }
        
        .table tr.alt td {
          text-align: center;
          color:#000000;
          background-color:#fff;
        }
    }
  }
}
</style>
